<template>
  <DialogCard :title="title" :width="width" :height="height" @close="close">
    <template v-slot:content>
      <div class="content" v-if="showwhitelist == 1">
        <el-scrollbar max-height="430px" v-if="whitelist.length>0">
          <div class="content-item" v-for="item in whitelist" :key="item.id">
            <div class="item-title">飞控序列号</div>
            <el-input
              class="ipt"
              disabled
              placeholder="请输入飞控序列号"
              v-model="item.serialCode"></el-input>
            <!-- <img
            src="/img/delete.png"
            alt=""
            style="width: 20px; margin-left: 15px"
            @click="deletewhiteListData(item)" /> -->
            <el-icon
              style="font-size: 24px; margin-left: 15px; color: #ff0000; cursor: pointer"
              @click="deletewhiteListData(item)"
              ><Delete
            /></el-icon>
          </div>
        </el-scrollbar>
        <div class="content-btn margin-box" @click="whiteadd">点击添加</div>
      </div>
      <div class="content" v-else-if="showwhitelist == 2">
        <!--<div class="content-item">
           <div class="item-title">飞控序列号</div>
          <el-input class="ipt" placeholder="请输入飞控序列号" v-model="serialCode"></el-input>
        </div>
        <div class="content-btn" @click="addwhiteListData">确认添加</div> -->
        <el-form
          ref="formRef"
          :rules="rules"
          :model="codeForm"
          label-width="auto"
          class="demo-ruleForm">
          <el-form-item label="飞控序列号" prop="serialCode">
            <el-input
              v-model="codeForm.serialCode"
              type="text"
              autocomplete="off"
              class="ipt"
              clearable />
          </el-form-item>
          <el-form-item>
            <div class="content-btn margin-box" @click="addwhiteListData(formRef)">确认添加</div>
          </el-form-item>
        </el-form>
      </div>
      <div class="content" v-else>
        <p class="delect-title">确认删除该飞控序列号吗？</p>
        <div class="btn-box">
          <div class="content-btn" @click="confirmDelect">确认</div>
          <div class="cancel-btn" style="margin-left: 20px" @click="closeDel">取消</div>
        </div>
      </div>
    </template>
  </DialogCard>
  <!-- 确认删除该飞控序列号 -->
</template>

<script setup>
  import { ref, onMounted, toRefs } from 'vue'
  import DialogCard from '@/components/home/dialog/dialogCard.vue'
  import { getwhiteList, addwhiteList, deletewhiteList } from '@/api/home.js'
  import { ElMessage } from 'element-plus'
  const props = defineProps({ title: 'string', width: Number, height: Number })
  const { title, width, height } = toRefs(props)

  const emit = defineEmits(['closeDialog', 'enableTool'])

  const formRef = ref(null)
  const codeForm = ref({
    serialCode: '',
  })
  const isSize = (rule, value, callback) => {
    if (!value) {
      return new Error('飞控序列号不能为空')
    } else {
      if (value.length > 5) {
        let item = whitelist.value.find((item) => {
          return item.serialCode == codeForm.value.serialCode
        })
        if (item) {
          callback(new Error('该序列号已存在'))
        } else {
          callback()
        }
      } else {
        callback(new Error('飞控序列号需至少输入6位字符'))
      }
    }
  }
  const rules = ref({
    serialCode: [
      { required: true, message: '飞控序列号不能为空', trigger: 'blur' },
      { validator: isSize, trigger: ['blur', 'change'] },
    ],
  })

  let showwhitelist = ref(1)

  let whitelist = ref([])

  let serialCode = ref('')

  const selectItem = ref(null)
  const confirmDel = ref(false)

  const getwhiteListData = () => {
    getwhiteList().then((res) => {
      whitelist.value = res.data
    })
  }

  /**
   * @description: 确认新增序列号
   */
  const addwhiteListData = (formEl) => {
    formEl.validate((valid) => {
      if (valid) {
        let obj = {
          serialCode: codeForm.value.serialCode,
        }
        addwhiteList(obj).then((res) => {
          if (res.code == 200) {
            ElMessage.success('添加成功')
            codeForm.value.serialCode = ''
            showwhitelist.value = 1
            getwhiteListData()
          } else {
            ElMessage.warning(res.msg)
          }
        })
      }
    })
  }

  const deletewhiteListData = (item) => {
    selectItem.value = item
    showwhitelist.value = 3
  }

  const whiteadd = () => {
    showwhitelist.value = 2
  }

  const close = () => {
    emit('closeDialog', 'white-list')
  }
  /**
   * @description: 取消删除
   */
  const closeDel = () => {
    showwhitelist.value = 1
  }
  /**
   * @description: 确认删除序列号
   */
  const confirmDelect = () => {
    deletewhiteList({ id: selectItem.value.id }).then((res) => {
      if (res.code == 200) {
        ElMessage.success('删除成功')
        getwhiteListData()
        showwhitelist.value = 1
      } else {
        ElMessage.warning(res.msg)
      }
    })
  }

  onMounted(() => {
    getwhiteListData()
    emit('enableTool', false)
  })
</script>

<style scoped lang="scss">
  :deep(.el-form-item__label) {
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;
  }
  :deep(.el-input.is-disabled .el-input__wrapper){
    background-color: transparent;
    box-shadow: 0 0 0 1px #2790c8 inset;
  }
  .content {
    padding-top: 10px;
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 15px 0;
      padding-right: 10px;
      .item-title {
        font-family: PingFang-SC-Regular;
        font-size: 16px;
        color: #ffffff;
      }
      .select {
        width: 300px;
      }
      .ipt {
        width: 300px;
        color: #ffffff;
      }
    }
    .btn-box {
      height: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .margin-box {
      margin: 0 auto;
      margin-top: 30px;
      margin-bottom: 20px;
    }
    .content-btn {
      cursor: pointer;
      width: 89px;
      height: 31px;
      background: linear-gradient(90deg, #21a4d7 0%, #1550ab 100%);
      border: 1px solid #80ebfd;
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);
      color: #ffffff;
      line-height: 31px;
      text-align: center;
    }
    .cancel-btn {
      cursor: pointer;
      width: 89px;
      height: 31px;
      background: linear-gradient(90deg, #084570 0%, #0a2034 100%);
      border: 1px solid rgba(255, 255, 255, 0.7);
      box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.7);
      color: #ffffff;
      line-height: 31px;
      text-align: center;
    }
  }
  :deep(.el-input__wrapper) {
    background-color: transparent;
    box-shadow: 0 0 0 1px #2790c8 inset;
  }
  :deep(.el-input__inner) {
    color: #fff;
    border: none;
    border-radius: 0px;
    border-color: transparent;
    background-color: transparent;
  }
  :deep(.el-select .el-input__wrapper, .el-input__wrapper) {
    background-color: transparent;
    color: #fff;
    border: 1px solid #2daef1;
    box-shadow: none;
  }
  :deep(.el-select .el-input__inner) {
    color: #ffffff;
  }
  .delect-title {
    font-size: 16px;
    color: #ffffff;
    text-align: center;
  }
</style>
